<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
         *{margin: 0;padding: 0;list-style-type: none;text-decoration: none;}
         #cc{width:960px;height:540px;position:relative;margin:200px auto;border: 5px solid #000;overflow: hidden;}
         ul{width:7680px;height:540px;position:absolute;left:0;top:0;}
         ul li{float: left;width:960px;height:540px;}
         ul li img{width:960px;height:540px;}
         ol {width:275px;height:30px;background: #fff;position: absolute;left:50%;margin-left: -120px;bottom:30px;}
         ol li{width: 30px;height:30px;font-size: 16px;line-height: 30px;text-align: center;display: inline-block;margin: 5px;background: #f00;color:#000;border-radius: 50%;cursor: pointer;margin: 0;}
         .li1{background: #0ff;color:#ff0;}
         a{display: block;width: 75px;height: 100px;color:#ff0;background: #0ff;text-align: center;line-height: 80px;font-size:24px;}
         .a1{position: absolute;top:50%;margin-top: -50px;left:0;}
         .a2{position: absolute;top:50%;margin-top: -50px;right:0;}
         #cd{width:960px;height:20px;position:absolute;bottom:0px;background: #fff;}
         p{display:inline-block;float:left;height:18px;width:118px;border:1px solid #000;background: #f00;}
         span{display:inline-block;height:18px;width:0;background:#ccc;}
        </style>
    </head>
    <body>
        <div id="cc">
            <ul>
                <li ><img src="img/1.jpg" alt=""></li>
                <li><img src="img/2.jpg" alt=""></li>
                <li><img src="img/3.jpg" alt=""></li>
                <li><img src="img/4.jpg" alt=""></li>
                <li><img src="img/5.jpg" alt=""></li>
                <li><img src="img/6.jpg" alt=""></li>
                <li><img src="img/7.jpg" alt=""></li>
                <li><img src="img/8.jpg" alt=""></li>
            </ul>
            <ol>
                <li class="li1">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li> 
                <li>6</li> 
                <li>7</li>
                <li>8</li>   
            </ol>
            <a href="javascript:;" class="a1">left</a>
            <a href="javascript:;" class="a2">right</a>
            <div id="cd">
                <p><span></span></p>
                <p><span></span></p>
                <p><span></span></p>
                <p><span></span></p>
                <p><span></span></p>
                <p><span></span></p>
                <p><span></span></p>
                <p><span></span></p>
            </div>
            
            <script src="js/jquery.min.js" type="text/javascript"></script>
            <script type="text/javascript">
//                封装后的代码
             var index=0;
             var ol_li=$("ol li");
             var tick;
             var tink;
             var ul=$("ul");
             var left=$(".a1");
             var right=$(".a2");
             var div=$("#cc");
             var a=$("a");
             var span=$("span");
             var p=$("p");
             ol_li.click(function(){
                    index = $(this).index();
                    auto();});   
                left.click(function(){
                    index--;
                    auto();});
                right.click(function(){
                    index++;
                   auto();});
               tick = setInterval(function(){index++;auto();},8000);
               tink = setInterval(function(){auto();},8000);
               div.hover(function(){
                   clearInterval(tick);
                   clearInterval(tink);
                   a.show();
               },function(){
                   tick =setInterval(function(){index++;auto();},8000);
                   tink =setInterval(function(){auto();},8000);
                   a.hide();
               });
             function auto(){
                 if(index>7){
                     index=0;
                 }else 
                     if(index<0){
                         index=7;
                     }
                  ol_li.eq(index).addClass("li1").siblings().removeClass("li1");
        ul.stop().animate({"margin-left":-960*index},4000) ;  
                   span.stop().css({"width":"0"});
                 p.eq(index).children("span").animate({"width":"100%"},4000);
             };
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
//                原装代码
//                var index=0;
//                $("ol li").click(function(){
//                    index = $(this).index();
//                    $("ol li").eq(index).addClass("li1").siblings().removeClass("li1");
//                    $("ul").animate({"margin-left":-960*index},2000);   
//                });
//                $(".a1").click(function(){
//                    index--;
//                    if(index<0){index=7;}
//                    $("ol li").eq(index).addClass("li1").siblings().removeClass("li1");
//                    $("ul").animate({"margin-left":-960*index},2000) ;   
//                });
//                $(".a2").click(function(){
//                    index++;
//                    if(index>7){index=0;}
//                    $("ol li").eq(index).addClass("li1").siblings().removeClass("li1");
//                    $("ul").animate({"margin-left":-960*index},1000) ;   
//                });
//               tick =setInterval(function(){$(".a2").click();},2000);
//               $("div").hover(function(){
//                   clearInterval(tick);
//                   $("a").show();
//               },function(){
//                   tick =setInterval(function(){$(".a2").click();},2000);
//                   $("a").hide();
//               });
            </script>
        </div>
    </body>
</html>
